{% extends "finance/base.html" %}
{% load static %}
{% load custom_filters %}
{% load humanize %}

{% block content %}

<style>
    .table .table-dark th {
        background-color: #56636f !important;
        border: none !important;
    }

    .container-fluid {
        border-bottom: none;
        padding-bottom: 10px;
    }

    .pagination-page-btn {
        background-color: #ffffff !important;
        border: 1px solid #6c757d !important;
        color: #495057 !important;
    }

    .pagination-page-btn:hover,
    .pagination-page-btn:focus {
        background-color: #f1f3f5 !important;
        border-color: #6c757d !important;
        color: #343a40 !important;
    }

    .pagination-current,
    .pagination-go {
        background-color: #56636f !important;
        border: 1px solid #56636f !important;
        color: #ffffff !important;
    }

    .pagination-current:hover,
    .pagination-current:focus,
    .pagination-go:hover,
    .pagination-go:focus {
        background-color: #49545e !important;
        border-color: #49545e !important;
        color: #ffffff !important;
    }

    .pagination-disabled {
        opacity: 0.55;
        pointer-events: none;
    }

    .budget-table-wrapper {
        width: 100%;
        overflow-x: auto;
    }

    .budget-table {
        min-width: 1900px;
        width: 100%;
        margin-bottom: 0;
        background-color: #ffffff !important;
        border-collapse: collapse !important;
        border-spacing: 0 !important;

        --bs-table-border-color: #dfe3e6 !important;
    }

    .budget-table th,
    .budget-table td {
        vertical-align: middle;
        white-space: nowrap;
    }

    /* HEADER */
    .budget-table thead th {
        text-align: center;
        vertical-align: middle;
        background-color: #56636f !important;
        color: #ffffff !important;
        border-top: none !important;
        border-bottom: none !important;
        border-left: 1px solid #68747e !important;
        border-right: 1px solid #68747e !important;
    }

    .budget-table thead th:first-child {
        border-left: none !important;
    }

    .budget-table thead th:last-child {
        border-right: none !important;
    }

    /* BODY */
    .budget-table tbody tr {
        border: none !important;
    }

    .budget-table tbody td {
        border-top: none !important;
        border-bottom: none !important;
        border-left: 1px solid #e1e4e7 !important;
        border-right: 1px solid #e1e4e7 !important;
        vertical-align: middle;
    }

    .budget-table tbody td:first-child {
        border-left: none !important;
    }

    .budget-table tbody td:last-child {
        border-right: none !important;
    }

    /* STRIPED ROWS */
    .budget-table tbody tr:nth-of-type(odd) td {
        background-color: #ffffff !important;
    }

    .budget-table tbody tr:nth-of-type(even) td {
        background-color: #f3f4f5 !important;
    }

    /* HOVER */
    .budget-table tbody tr:hover td {
        background-color: #eef0f2 !important;
    }

    .budget-number {
        text-align: right;
    }

    .quarter-header {
        background-color: #56636f !important;
        color: #ffffff !important;
    }

    .modal-xl {
        max-width: 1100px;
    }

    .budget-section-title {
        font-weight: 600;
        color: #495057;
        margin-bottom: 10px;
    }

    .budget-total-input {
        background-color: #f1f3f5 !important;
        font-weight: 600;
    }
</style>

<div class="container-fluid">

```
<!-- ==================================================== -->
<!-- HEADER -->
<!-- ==================================================== -->
<div class="d-flex justify-content-between align-items-center mb-2">

    <div class="d-flex align-items-center gap-2">

        <h4 class="mb-0 me-2">
            Entry Budget / WP&B
        </h4>

        <form method="get" class="d-flex align-items-center gap-2">

            <input
                type="text"
                name="search"
                value="{{ query|default:'' }}"
                class="form-control form-control-sm"
                placeholder="Search Account No / Name"
                style="width:220px;"
            >

            <select
                name="year"
                class="form-select form-select-sm"
                style="width:100px;"
            >
                {% for y in years %}
                    <option
                        value="{{ y }}"
                        {% if y == year %}selected{% endif %}
                    >
                        {{ y }}
                    </option>
                {% endfor %}
            </select>

            <button
                type="submit"
                class="btn btn-sm btn-secondary"
            >
                <i class="bi bi-funnel"></i>
                Filter
            </button>

        </form>

    </div>


    <!-- ================================================= -->
    <!-- ACTION BUTTONS -->
    <!-- ================================================= -->
    <div class="d-flex align-items-center gap-1">

        <button
            type="button"
            class="btn btn-sm btn-secondary"
            data-bs-toggle="modal"
            data-bs-target="#importBudgetModal"
        >
            Import Excel/CSV
        </button>

        <a
            href="{% url 'download_budget_template' %}"
            class="btn btn-sm btn-secondary"
        >
            Template
        </a>

        <a
            href="{% url 'generate_pdf_budget' %}?search={{ query|default:'' }}&year={{ year|default:'' }}"
            target="_blank"
            class="btn btn-sm btn-secondary"
        >
            Generate PDF
        </a>

        <a
            href="{% url 'export_to_excel_budget' %}?search={{ query|default:'' }}&year={{ year|default:'' }}"
            class="btn btn-sm btn-secondary"
        >
            Export to Excel
        </a>

    </div>

</div>


<!-- ==================================================== -->
<!-- TOP PAGINATION -->
<!-- ==================================================== -->
<div class="d-flex justify-content-between align-items-center mb-2">

    <div class="text-muted small">

        Showing
        {{ paginator_obj.start_index }}
        -
        {{ paginator_obj.end_index }}
        of
        {{ paginator_obj.paginator.count }}

    </div>


    <div class="d-flex align-items-center gap-1">

        {% if paginator_obj.has_previous %}

            <a
                class="btn btn-sm pagination-page-btn"
                href="?page=1&search={{ query|default:'' }}&year={{ year|default:'' }}"
            >
                First
            </a>

            <a
                class="btn btn-sm pagination-page-btn"
                href="?page={{ paginator_obj.previous_page_number }}&search={{ query|default:'' }}&year={{ year|default:'' }}"
            >
                Previous
            </a>

        {% else %}

            <span class="btn btn-sm pagination-page-btn pagination-disabled">
                First
            </span>

            <span class="btn btn-sm pagination-page-btn pagination-disabled">
                Previous
            </span>

        {% endif %}


        <span class="btn btn-sm pagination-current">
            {{ paginator_obj.number }}
            /
            {{ paginator_obj.paginator.num_pages }}
        </span>


        {% if paginator_obj.has_next %}

            <a
                class="btn btn-sm pagination-page-btn"
                href="?page={{ paginator_obj.next_page_number }}&search={{ query|default:'' }}&year={{ year|default:'' }}"
            >
                Next
            </a>

            <a
                class="btn btn-sm pagination-page-btn"
                href="?page={{ paginator_obj.paginator.num_pages }}&search={{ query|default:'' }}&year={{ year|default:'' }}"
            >
                Last
            </a>

        {% else %}

            <span class="btn btn-sm pagination-page-btn pagination-disabled">
                Next
            </span>

            <span class="btn btn-sm pagination-page-btn pagination-disabled">
                Last
            </span>

        {% endif %}


        <form
            method="get"
            class="d-flex align-items-center gap-1 ms-2"
        >

            <input
                type="hidden"
                name="search"
                value="{{ query|default:'' }}"
            >

            <input
                type="hidden"
                name="year"
                value="{{ year|default:'' }}"
            >

            <span class="small text-muted">
                Go to Page
            </span>

            <input
                type="number"
                name="page"
                min="1"
                max="{{ paginator_obj.paginator.num_pages }}"
                class="form-control form-control-sm"
                style="width:70px;"
            >

            <button
                type="submit"
                class="btn btn-sm pagination-go"
            >
                Go
            </button>

        </form>

    </div>

</div>


<!-- ==================================================== -->
<!-- TABLE -->
<!-- ==================================================== -->
<div class="budget-table-wrapper">

    <table class="table table-sm budget-table">

        <thead class="table-dark">

            <tr>

                <th rowspan="2" style="width:50px;">
                    No
                </th>

                <th rowspan="2">
                    Account No
                </th>

                <th rowspan="2">
                    Account Name
                </th>


                <th colspan="4" class="quarter-header">
                    Q1
                </th>

                <th colspan="4" class="quarter-header">
                    Q2
                </th>

                <th colspan="4" class="quarter-header">
                    Q3
                </th>

                <th colspan="4" class="quarter-header">
                    Q4
                </th>

                <th rowspan="2" style="width:80px;">
                    Action
                </th>

            </tr>


            <tr>

                <th>Jan</th>
                <th>Feb</th>
                <th>Mar</th>
                <th>Total</th>

                <th>Apr</th>
                <th>May</th>
                <th>Jun</th>
                <th>Total</th>

                <th>Jul</th>
                <th>Aug</th>
                <th>Sep</th>
                <th>Total</th>

                <th>Oct</th>
                <th>Nov</th>
                <th>Dec</th>
                <th>Total</th>

            </tr>

        </thead>


        <tbody>

            {% for row in page_obj %}

                <tr>

                    <td class="text-center">
                        {{ forloop.counter0|add:paginator_obj.start_index }}
                    </td>

                    <td>
                        {{ row.acct_no|format_acct_no }}
                    </td>

                    <td>
                        {{ row.acct_name }}
                    </td>


                    <!-- Q1 -->
                    <td class="budget-number">
                        {{ row.usdbgt01|default:0|floatformat:2|intcomma }}
                    </td>

                    <td class="budget-number">
                        {{ row.usdbgt02|default:0|floatformat:2|intcomma }}
                    </td>

                    <td class="budget-number">
                        {{ row.usdbgt03|default:0|floatformat:2|intcomma }}
                    </td>

                    <td class="budget-number fw-semibold">
                        {{ row.q1_display|default:0|floatformat:2|intcomma }}
                    </td>


                    <!-- Q2 -->
                    <td class="budget-number">
                        {{ row.usdbgt04|default:0|floatformat:2|intcomma }}
                    </td>

                    <td class="budget-number">
                        {{ row.usdbgt05|default:0|floatformat:2|intcomma }}
                    </td>

                    <td class="budget-number">
                        {{ row.usdbgt06|default:0|floatformat:2|intcomma }}
                    </td>

                    <td class="budget-number fw-semibold">
                        {{ row.q2_display|default:0|floatformat:2|intcomma }}
                    </td>


                    <!-- Q3 -->
                    <td class="budget-number">
                        {{ row.usdbgt07|default:0|floatformat:2|intcomma }}
                    </td>

                    <td class="budget-number">
                        {{ row.usdbgt08|default:0|floatformat:2|intcomma }}
                    </td>

                    <td class="budget-number">
                        {{ row.usdbgt09|default:0|floatformat:2|intcomma }}
                    </td>

                    <td class="budget-number fw-semibold">
                        {{ row.q3_display|default:0|floatformat:2|intcomma }}
                    </td>


                    <!-- Q4 -->
                    <td class="budget-number">
                        {{ row.usdbgt10|default:0|floatformat:2|intcomma }}
                    </td>

                    <td class="budget-number">
                        {{ row.usdbgt11|default:0|floatformat:2|intcomma }}
                    </td>

                    <td class="budget-number">
                        {{ row.usdbgt12|default:0|floatformat:2|intcomma }}
                    </td>

                    <td class="budget-number fw-semibold">
                        {{ row.q4_display|default:0|floatformat:2|intcomma }}
                    </td>


                    <!-- ACTION -->
                    <td class="text-center">

                        <button
                            type="button"
                            class="btn btn-sm btn-secondary"
                            onclick="editBudget('{{ row.year }}', '{{ row.acct_no|format_acct_no }}')"
                            title="Edit Budget"
                        >
                            <i class="bi bi-pencil"></i>
                        </button>

                    </td>

                </tr>

            {% empty %}

                <tr>

                    <td
                        colspan="20"
                        class="text-center text-muted py-4"
                    >
                        No data found.
                    </td>

                </tr>

            {% endfor %}

        </tbody>

    </table>

</div>


<!-- ==================================================== -->
<!-- BOTTOM PAGINATION -->
<!-- ==================================================== -->
<div class="d-flex justify-content-between align-items-center mt-2">

    <div class="text-muted small">

        Showing
        {{ paginator_obj.start_index }}
        -
        {{ paginator_obj.end_index }}
        of
        {{ paginator_obj.paginator.count }}

    </div>


    <div class="d-flex align-items-center gap-1">

        {% if paginator_obj.has_previous %}

            <a
                class="btn btn-sm pagination-page-btn"
                href="?page=1&search={{ query|default:'' }}&year={{ year|default:'' }}"
            >
                First
            </a>

            <a
                class="btn btn-sm pagination-page-btn"
                href="?page={{ paginator_obj.previous_page_number }}&search={{ query|default:'' }}&year={{ year|default:'' }}"
            >
                Previous
            </a>

        {% else %}

            <span class="btn btn-sm pagination-page-btn pagination-disabled">
                First
            </span>

            <span class="btn btn-sm pagination-page-btn pagination-disabled">
                Previous
            </span>

        {% endif %}


        <span class="btn btn-sm pagination-current">
            {{ paginator_obj.number }}
            /
            {{ paginator_obj.paginator.num_pages }}
        </span>


        {% if paginator_obj.has_next %}

            <a
                class="btn btn-sm pagination-page-btn"
                href="?page={{ paginator_obj.next_page_number }}&search={{ query|default:'' }}&year={{ year|default:'' }}"
            >
                Next
            </a>

            <a
                class="btn btn-sm pagination-page-btn"
                href="?page={{ paginator_obj.paginator.num_pages }}&search={{ query|default:'' }}&year={{ year|default:'' }}"
            >
                Last
            </a>

        {% else %}

            <span class="btn btn-sm pagination-page-btn pagination-disabled">
                Next
            </span>

            <span class="btn btn-sm pagination-page-btn pagination-disabled">
                Last
            </span>

        {% endif %}


        <form
            method="get"
            class="d-flex align-items-center gap-1 ms-2"
        >

            <input
                type="hidden"
                name="search"
                value="{{ query|default:'' }}"
            >

            <input
                type="hidden"
                name="year"
                value="{{ year|default:'' }}"
            >

            <span class="small text-muted">
                Go to Page
            </span>

            <input
                type="number"
                name="page"
                min="1"
                max="{{ paginator_obj.paginator.num_pages }}"
                class="form-control form-control-sm"
                style="width:70px;"
            >

            <button
                type="submit"
                class="btn btn-sm pagination-go"
            >
                Go
            </button>

        </form>

    </div>

</div>
```

</div>

<!-- ======================================================== -->

<!-- IMPORT BUDGET MODAL -->

<!-- ======================================================== -->

<div
    class="modal fade"
    id="importBudgetModal"
    tabindex="-1"
    aria-labelledby="importBudgetModalLabel"
    aria-hidden="true"
>

```
<div class="modal-dialog modal-lg modal-dialog-centered">

    <div class="modal-content">

        <div class="modal-header">

            <h5
                class="modal-title"
                id="importBudgetModalLabel"
            >
                Import Budget
            </h5>

            <button
                type="button"
                class="btn-close"
                data-bs-dismiss="modal"
                aria-label="Close"
            ></button>

        </div>


        <div class="modal-body">

            <div class="alert alert-info">

                <strong>Import format:</strong>

                <br>

                Account No, Account Name,
                Jan, Feb, Mar, Apr, May, Jun,
                Jul, Aug, Sep, Oct, Nov, Dec

                <br><br>

                <strong>Note:</strong>
                Q1, Q2, Q3, and Q4 are calculated automatically
                from the monthly values.

            </div>


            <div class="mb-3">

                <label
                    for="importBudgetYear"
                    class="form-label"
                >
                    Year
                </label>

                <select
                    id="importBudgetYear"
                    class="form-select"
                >

                    {% for y in years %}

                        <option
                            value="{{ y }}"
                            {% if y == year %}selected{% endif %}
                        >
                            {{ y }}
                        </option>

                    {% endfor %}

                </select>

            </div>


            <div class="mb-3">

                <label
                    for="importBudgetFile"
                    class="form-label"
                >
                    Excel / CSV File
                </label>

                <input
                    type="file"
                    id="importBudgetFile"
                    class="form-control"
                    accept=".xlsx,.csv"
                >

            </div>


            <div class="small text-muted">

                Belum punya format file?

                <a
                    href="{% url 'download_budget_template' %}"
                >
                    Download Import Template
                </a>

            </div>


            <div
                id="importBudgetMessage"
                class="mt-3"
            ></div>

        </div>


        <div class="modal-footer">

            <button
                type="button"
                class="btn btn-secondary"
                data-bs-dismiss="modal"
            >
                Close
            </button>

            <button
                type="button"
                class="btn btn-secondary"
                onclick="importBudget()"
            >
                Import Budget
            </button>

        </div>

    </div>

</div>
```

</div>

<!-- ======================================================== -->

<!-- EDIT BUDGET MODAL -->

<!-- ======================================================== -->

<div
    class="modal fade"
    id="budgetModal"
    tabindex="-1"
    aria-labelledby="budgetModalLabel"
    aria-hidden="true"
>

```
<div class="modal-dialog modal-xl modal-dialog-centered">

    <div class="modal-content">

        <div class="modal-header">

            <h5
                class="modal-title"
                id="budgetModalLabel"
            >
                Edit Budget
            </h5>

            <button
                type="button"
                class="btn-close"
                data-bs-dismiss="modal"
                aria-label="Close"
            ></button>

        </div>


        <div class="modal-body">

            <input
                type="hidden"
                id="budgetYear"
            >

            <input
                type="hidden"
                id="budgetAcctNo"
            >


            <div class="row mb-3">

                <div class="col-md-2">

                    <label class="form-label">
                        Year
                    </label>

                    <input
                        type="text"
                        id="budgetYearDisplay"
                        class="form-control bg-light"
                        readonly
                    >

                </div>


                <div class="col-md-4">

                    <label class="form-label">
                        Account No
                    </label>

                    <input
                        type="text"
                        id="budgetAcctNoDisplay"
                        class="form-control bg-light"
                        readonly
                    >

                </div>


                <div class="col-md-6">

                    <label class="form-label">
                        Account Name
                    </label>

                    <input
                        type="text"
                        id="budgetAcctName"
                        class="form-control bg-light"
                        readonly
                    >

                </div>

            </div>


            <div class="row">

                <!-- Q1 -->
                <div class="col-md-6 mb-3">

                    <div class="border rounded p-3">

                        <div class="budget-section-title">
                            Q1
                        </div>

                        <div class="row">

                            <div class="col-md-3">

                                <label class="form-label">
                                    Jan
                                </label>

                                <input
                                    type="text"
                                    id="usdbgt01"
                                    class="form-control budget-month"
                                    oninput="calculateBudgetQuarters()"
                                >

                            </div>

                            <div class="col-md-3">

                                <label class="form-label">
                                    Feb
                                </label>

                                <input
                                    type="text"
                                    id="usdbgt02"
                                    class="form-control budget-month"
                                    oninput="calculateBudgetQuarters()"
                                >

                            </div>

                            <div class="col-md-3">

                                <label class="form-label">
                                    Mar
                                </label>

                                <input
                                    type="text"
                                    id="usdbgt03"
                                    class="form-control budget-month"
                                    oninput="calculateBudgetQuarters()"
                                >

                            </div>

                            <div class="col-md-3">

                                <label class="form-label">
                                    Q1
                                </label>

                                <input
                                    type="text"
                                    id="q1"
                                    class="form-control budget-total-input"
                                    readonly
                                >

                            </div>

                        </div>

                    </div>

                </div>


                <!-- Q2 -->
                <div class="col-md-6 mb-3">

                    <div class="border rounded p-3">

                        <div class="budget-section-title">
                            Q2
                        </div>

                        <div class="row">

                            <div class="col-md-3">

                                <label class="form-label">
                                    Apr
                                </label>

                                <input
                                    type="text"
                                    id="usdbgt04"
                                    class="form-control budget-month"
                                    oninput="calculateBudgetQuarters()"
                                >

                            </div>

                            <div class="col-md-3">

                                <label class="form-label">
                                    May
                                </label>

                                <input
                                    type="text"
                                    id="usdbgt05"
                                    class="form-control budget-month"
                                    oninput="calculateBudgetQuarters()"
                                >

                            </div>

                            <div class="col-md-3">

                                <label class="form-label">
                                    Jun
                                </label>

                                <input
                                    type="text"
                                    id="usdbgt06"
                                    class="form-control budget-month"
                                    oninput="calculateBudgetQuarters()"
                                >

                            </div>

                            <div class="col-md-3">

                                <label class="form-label">
                                    Q2
                                </label>

                                <input
                                    type="text"
                                    id="q2"
                                    class="form-control budget-total-input"
                                    readonly
                                >

                            </div>

                        </div>

                    </div>

                </div>


                <!-- Q3 -->
                <div class="col-md-6 mb-3">

                    <div class="border rounded p-3">

                        <div class="budget-section-title">
                            Q3
                        </div>

                        <div class="row">

                            <div class="col-md-3">

                                <label class="form-label">
                                    Jul
                                </label>

                                <input
                                    type="text"
                                    id="usdbgt07"
                                    class="form-control budget-month"
                                    oninput="calculateBudgetQuarters()"
                                >

                            </div>

                            <div class="col-md-3">

                                <label class="form-label">
                                    Aug
                                </label>

                                <input
                                    type="text"
                                    id="usdbgt08"
                                    class="form-control budget-month"
                                    oninput="calculateBudgetQuarters()"
                                >

                            </div>

                            <div class="col-md-3">

                                <label class="form-label">
                                    Sep
                                </label>

                                <input
                                    type="text"
                                    id="usdbgt09"
                                    class="form-control budget-month"
                                    oninput="calculateBudgetQuarters()"
                                >

                            </div>

                            <div class="col-md-3">

                                <label class="form-label">
                                    Q3
                                </label>

                                <input
                                    type="text"
                                    id="q3"
                                    class="form-control budget-total-input"
                                    readonly
                                >

                            </div>

                        </div>

                    </div>

                </div>


                <!-- Q4 -->
                <div class="col-md-6 mb-3">

                    <div class="border rounded p-3">

                        <div class="border rounded p-3">

                            <div class="budget-section-title">
                                Q4
                            </div>

                            <div class="row">

                                <div class="col-md-3">

                                    <label class="form-label">
                                        Oct
                                    </label>

                                    <input
                                        type="text"
                                        id="usdbgt10"
                                        class="form-control budget-month"
                                        oninput="calculateBudgetQuarters()"
                                    >

                                </div>

                                <div class="col-md-3">

                                    <label class="form-label">
                                        Nov
                                    </label>

                                    <input
                                        type="text"
                                        id="usdbgt11"
                                        class="form-control budget-month"
                                        oninput="calculateBudgetQuarters()"
                                    >

                                </div>

                                <div class="col-md-3">

                                    <label class="form-label">
                                        Dec
                                    </label>

                                    <input
                                        type="text"
                                        id="usdbgt12"
                                        class="form-control budget-month"
                                        oninput="calculateBudgetQuarters()"
                                    >

                                </div>

                                <div class="col-md-3">

                                    <label class="form-label">
                                        Q4
                                    </label>

                                    <input
                                        type="text"
                                        id="q4"
                                        class="form-control budget-total-input"
                                        readonly
                                    >

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>


        <div class="modal-footer">

            <button
                type="button"
                class="btn btn-secondary"
                data-bs-dismiss="modal"
            >
                Close
            </button>

            <button
                type="button"
                class="btn btn-secondary"
                onclick="saveBudget()"
            >
                <i class="bi bi-save"></i>
                Save
            </button>

        </div>

    </div>

</div>
```

</div>

<script>

    // ========================================================
    // NUMBER
    // ========================================================

    function parseBudgetNumber(value) {

        if (!value) {
            return 0;
        }

        value = value
            .toString()
            .replace(/,/g, '')
            .trim();

        const number = parseFloat(value);

        return isNaN(number) ? 0 : number;
    }


    function formatBudgetNumber(value) {

        const number = parseBudgetNumber(value);

        return number.toLocaleString(
            'en-US',
            {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            }
        );
    }


    // ========================================================
    // QUARTER CALCULATION
    // ========================================================

    function calculateBudgetQuarters() {

        const q1 =
            parseBudgetNumber(
                document.getElementById('usdbgt01').value
            ) +
            parseBudgetNumber(
                document.getElementById('usdbgt02').value
            ) +
            parseBudgetNumber(
                document.getElementById('usdbgt03').value
            );

        const q2 =
            parseBudgetNumber(
                document.getElementById('usdbgt04').value
            ) +
            parseBudgetNumber(
                document.getElementById('usdbgt05').value
            ) +
            parseBudgetNumber(
                document.getElementById('usdbgt06').value
            );

        const q3 =
            parseBudgetNumber(
                document.getElementById('usdbgt07').value
            ) +
            parseBudgetNumber(
                document.getElementById('usdbgt08').value
            ) +
            parseBudgetNumber(
                document.getElementById('usdbgt09').value
            );

        const q4 =
            parseBudgetNumber(
                document.getElementById('usdbgt10').value
            ) +
            parseBudgetNumber(
                document.getElementById('usdbgt11').value
            ) +
            parseBudgetNumber(
                document.getElementById('usdbgt12').value
            );


        document.getElementById('q1').value =
            formatBudgetNumber(q1);

        document.getElementById('q2').value =
            formatBudgetNumber(q2);

        document.getElementById('q3').value =
            formatBudgetNumber(q3);

        document.getElementById('q4').value =
            formatBudgetNumber(q4);
    }


    // ========================================================
    // EDIT
    // ========================================================

    function editBudget(year, acctNo) {

        const url =
            `/budget/${year}/${encodeURIComponent(acctNo)}/edit/`;

        fetch(url)

            .then(response => response.json())

            .then(data => {

                if (!data.success) {

                    alert(
                        data.message ||
                        'Budget data not found.'
                    );

                    return;
                }


                document.getElementById(
                    'budgetYear'
                ).value = data.year;

                document.getElementById(
                    'budgetAcctNo'
                ).value = data.acct_no;

                document.getElementById(
                    'budgetYearDisplay'
                ).value = data.year;

                document.getElementById(
                    'budgetAcctNoDisplay'
                ).value = data.acct_no;

                document.getElementById(
                    'budgetAcctName'
                ).value = data.acct_name || '';


                for (let i = 1; i <= 12; i++) {

                    const field =
                        `usdbgt${String(i).padStart(2, '0')}`;

                    document.getElementById(
                        field
                    ).value = formatBudgetNumber(
                        data[field]
                    );
                }


                calculateBudgetQuarters();


                const modal =
                    new bootstrap.Modal(
                        document.getElementById(
                            'budgetModal'
                        )
                    );

                modal.show();

            })

            .catch(error => {

                console.error(error);

                alert(
                    'Unable to load Budget data.'
                );

            });
    }


    // ========================================================
    // CSRF
    // ========================================================

    function getCookie(name) {

        let cookieValue = null;

        if (document.cookie && document.cookie !== '') {

            const cookies =
                document.cookie.split(';');

            for (
                let i = 0;
                i < cookies.length;
                i++
            ) {

                const cookie =
                    cookies[i].trim();

                if (
                    cookie.substring(
                        0,
                        name.length + 1
                    ) ===
                    (name + '=')
                ) {

                    cookieValue =
                        decodeURIComponent(
                            cookie.substring(
                                name.length + 1
                            )
                        );

                    break;
                }
            }
        }

        return cookieValue;
    }


    // ========================================================
    // SAVE
    // ========================================================

    function saveBudget() {

        const year =
            document.getElementById(
                'budgetYear'
            ).value;

        const acctNo =
            document.getElementById(
                'budgetAcctNo'
            ).value;

        const formData =
            new FormData();


        formData.append(
            'csrfmiddlewaretoken',
            getCookie('csrftoken')
        );


        for (let i = 1; i <= 12; i++) {

            const field =
                `usdbgt${String(i).padStart(2, '0')}`;

            formData.append(
                field,
                document.getElementById(field).value
            );
        }


        fetch(
            `/budget/${year}/${encodeURIComponent(acctNo)}/edit/`,
            {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRFToken':
                        getCookie('csrftoken')
                }
            }
        )

        .then(response => response.json())

        .then(data => {

            if (data.success) {

                location.reload();

            } else {

                alert(
                    data.message ||
                    'Unable to save Budget.'
                );

            }

        })

        .catch(error => {

            console.error(error);

            alert(
                'Unable to save Budget.'
            );

        });
    }


    // ========================================================
    // IMPORT BUDGET
    // ========================================================

    function importBudget() {

        const year =
            document.getElementById(
                'importBudgetYear'
            ).value;

        const fileInput =
            document.getElementById(
                'importBudgetFile'
            );

        const message =
            document.getElementById(
                'importBudgetMessage'
            );


        message.innerHTML = '';


        if (!fileInput.files.length) {

            message.innerHTML =
                '<div class="alert alert-warning">' +
                'Please select an Excel or CSV file.' +
                '</div>';

            return;
        }


        const formData =
            new FormData();

        formData.append(
            'year',
            year
        );

        formData.append(
            'file',
            fileInput.files[0]
        );

        formData.append(
            'csrfmiddlewaretoken',
            getCookie('csrftoken')
        );


        const button =
            document.querySelector(
                '#importBudgetModal .modal-footer button:last-child'
            );

        button.disabled = true;

        button.innerHTML =
            '<span class="spinner-border spinner-border-sm me-1"></span>' +
            'Importing...';


        fetch(
            "{% url 'import_budget' %}",
            {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRFToken':
                        getCookie('csrftoken')
                }
            }
        )

        .then(async response => {

            const data =
                await response.json();

            if (!response.ok) {

                throw data;

            }

            return data;

        })

        .then(data => {

            if (data.success) {

                message.innerHTML =
                    '<div class="alert alert-success">' +
                    data.message +
                    '</div>';

                setTimeout(
                    function() {
                        location.reload();
                    },
                    800
                );

            } else {

                message.innerHTML =
                    '<div class="alert alert-danger">' +
                    (data.message ||
                    'Import failed.') +
                    '</div>';

            }

        })

        .catch(error => {

            console.error(error);


            let html =
                '<div class="alert alert-danger">' +
                (
                    error.message ||
                    'Import failed.'
                ) +
                '</div>';


            if (
                error.errors &&
                error.errors.length
            ) {

                html +=
                    '<div class="alert alert-danger mt-2">' +
                    '<strong>Details:</strong><br>' +
                    error.errors.join('<br>') +
                    '</div>';

            }


            message.innerHTML = html;

        })

        .finally(() => {

            button.disabled = false;

            button.innerHTML =
                'Import Budget';

        });
    }


    // ========================================================
    // RESET IMPORT MODAL
    // ========================================================

    document.getElementById(
        'importBudgetModal'
    ).addEventListener(
        'hidden.bs.modal',
        function() {

            document.getElementById(
                'importBudgetFile'
            ).value = '';

            document.getElementById(
                'importBudgetMessage'
            ).innerHTML = '';

        }
    );

</script>

{% endblock %}